/* Basic style for Blogger Feed Rotator plugin */

/*
 # Generated HTML markup:
 --------------------------------------------------------
 <div id="slider-rotator" class="slider-rotator loading">
     <div class="slider-item">
         <div class="image-wrapper">
            <img alt="Post Title 1" src="thumbnail.jpg" style="width:250px;height:250px;">
         </div>
         <div class="detail-wrapper">
            <h4><a href="" title="Post Title 1">Post Title 1</a></h4>
            <p>Lorem ipsum dolor sit amet...</p>
         </div>
     </div>
     <div class="slider-item">
         <div class="image-wrapper">
            <img alt="Post Title 2" src="thumbnail.jpg" style="width:250px;height:250px;">
         </div>
         <div class="detail-wrapper">
            <h4><a href="" title="Post Title 2">Post Title 2</a></h4>
            <p>Lorem ipsum dolor sit amet...</p>
         </div>
     </div>
     ...
 </div>
 <div class="slider-rotator-nav">
     <span class="rotator-advancer">
         <a href="#prev">&lt;</a>
     </span>
     <span class="rotator-num">
         <a href="#slide-0">1</a>
         <a href="#slide-1">2</a>
         ...
     </span>
     <span class="rotator-advancer">
         <a href="#next">&gt;</a>
     </span>
 </div>
 --------------------------------------------------------
*/

.slider-rotator {
  width:250px;
  height:340px;
  border:1px solid #ccc;
  background-color:white;
  padding:10px;
  font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;
  color:#333;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  text-align:left;
}

.slider-rotator.loading {
  background-image:url('');
  background-position:50% 50%;
  background-repeat:no-repeat;
}

.slider-rotator .slider-item {
  position:absolute;
  padding:10px; /* same with `.slider-rotator` padding size */
  background-color:white;
  top:0;
  right:0;
  bottom:auto;
  left:0;
  display:none;
}

.slider-rotator .image-wrapper {}
.slider-rotator .detail-wrapper {}

.slider-rotator img {
  display:block;
  border:none;
  outline:none;
  padding:0 0;
  margin:0 0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  max-width:none;
  max-height:none;
}

.slider-rotator h4 {
  font:inherit;
  font-weight:bold;
  font-size:120%;
  text-transform:none;
  color:#3B4B7E;
  margin:10px 0 0;
}

.slider-rotator h4 a {
  color:inherit;
  text-decoration:none;
}

.slider-rotator h4 a:hover {
  color:#793B7E;
  text-decoration:underline;
}

.slider-rotator p {margin:10px 0 0}

.slider-rotator-nav {text-align:center}

.slider-rotator-nav a {
  display:inline;
  background-color:#333;
  color:white;
  padding:4px 8px;
  line-height:2.6em;
  margin:0 2px;
  text-decoration:none;
}

.slider-rotator-nav a:hover {background-color:#111}
.slider-rotator-nav a.current {background-color:#3B4B7E}